{% extends 'layouts/base.html' %}

{% block title %} 控制台 {% endblock title %}

<!-- Specific CSS goes HERE -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

    <!-- Header -->
    <div class="header bg-primary pb-6">
        <div class="container-fluid">
            <div class="header-body">
                <div class="row align-items-center py-4">
                    <div class="col-lg-6 col-7">
                        <h6 class="h2 text-white d-inline-block mb-0">Dashboard</h6>
                        <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
                            <ol class="breadcrumb breadcrumb-links breadcrumb-dark">
                                <li class="breadcrumb-item"><a href="#"><i class="fas fa-home"></i></a>
                                </li>
                                <li class="breadcrumb-item"><a href="#">控制台</a></li>
                                <li class="breadcrumb-item active" aria-current="page">主页</li>
                            </ol>
                        </nav>
                    </div>
                    <div class="col-lg-6 col-5 text-right">
                        <a href="/new.html" class="btn btn-sm btn-neutral">新文章</a>
                        <a href="/images.html" class="btn btn-sm btn-neutral">图片</a>
                    </div>
                </div>
                <!-- Card stats -->
                <div class="row">
                    <div class="col-xl-3 col-md-6">
                        <div class="card card-stats">
                            <!-- Card body -->
                            <div class="card-body">
                                <div class="row">
                                    <div class="col">
                                        <h5 class="card-title text-uppercase text-muted mb-0">
                                            总文章</h5>
                                        <span class="h2 font-weight-bold mb-0">{{ post_number }}</span>
                                    </div>
                                    <div class="col-auto">
                                        <div class="icon icon-shape bg-gradient-orange text-white rounded-circle shadow">
                                            <i class="ni ni-chart-pie-35"></i>
                                        </div>
                                    </div>
                                </div>
                                <p class="mt-3 mb-0 text-sm">
                                    <span class="text mr-2"><i class="fa fa-archive"></i></span>
                                    <span class="text-nowrap">今天你写文章了吗</span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6">
                        <div class="card card-stats">
                            <!-- Card body -->
                            <div class="card-body">
                                <div class="row">
                                    <div class="col">
                                        <h5 class="card-title text-uppercase text-muted mb-0">
                                            总图片</h5>
                                        <span class="h2 font-weight-bold mb-0">{{ images_number }}</span>
                                    </div>
                                    <div class="col-auto">
                                        <div class="icon icon-shape bg-gradient-red text-white rounded-circle shadow">
                                            <i class="ni ni-active-40"></i>
                                        </div>
                                    </div>
                                </div>
                                <p class="mt-3 mb-0 text-sm">
                                    <span class="text mr-2"><i class="fa fa-images"></i></span>
                                    <span class="text-nowrap">尝试图片管理</span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6">
                        <div class="card card-stats">
                            <!-- Card body -->
                            <div class="card-body">
                                <div class="row">
                                    <div class="col">
                                        <h5 class="card-title text-uppercase text-muted mb-0">
                                            当前版本</h5>
                                        <span class="h2 font-weight-bold mb-0">{{ version }}</span>
                                    </div>
                                    <div class="col-auto">
                                        <div class="icon icon-shape bg-gradient-green text-white rounded-circle shadow">
                                            <i class="ni ni-money-coins"></i>
                                        </div>
                                    </div>
                                </div>
                                {% if not hasNew %}
                                    <p class="mt-3 mb-0 text-sm">
                                        <span class="text mr-2"><i
                                                class="fa fa-arrow-up"></i></span>
                                        <span class="text-nowrap">是最新版哦</span>
                                    </p>
                                {% else %}
                                    <p class="mt-3 mb-0 text-sm">
                                        <span class="text mr-2"><i
                                                class="fa fa-arrow-up"></i></span>
                                        <span class="text-nowrap">检测到更新 <a
                                                href="{{ newer_link }}"
                                                target="_blank">
                                        {{ newer }}</a></span>
                                    </p>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6">
                        <div class="card card-stats">
                            <!-- Card body -->
                            <div class="card-body">
                                <div class="row">
                                    <div class="col">
                                        <h5 class="card-title text-uppercase text-muted mb-0">
                                            Github</h5>
                                        <span class="h2 font-weight-bold mb-0">Acrylic-Server</span>
                                    </div>
                                    <div class="col-auto">
                                        <div class="icon icon-shape bg-gradient-info text-white rounded-circle shadow">
                                            <i class="ni ni-chart-bar-32"></i>
                                        </div>
                                    </div>
                                </div>
                                <p class="mt-3 mb-0 text-sm">
                                    <span class="text mr-2"><i class="fab fa-github-alt"></i></span>
                                    <span class="text-nowrap">支持作者</span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6">
                        <div class="card card-stats">
                            <!-- Card body -->
                            <div class="card-body">
                                <div class="row">
                                    <div class="col">
                                        <h5 class="card-title text-uppercase text-muted mb-0">
                                            邮箱订阅</h5>
                                        <span class="h2 font-weight-bold mb-0">订阅总数：{{ sub_sum }}</span>
                                    </div>
                                    <div class="col-auto">
                                        <div class="icon icon-shape bg-gradient-info text-white rounded-circle shadow">
                                            <a class="ni-ni-chart-bar-32" href="javascript:query_sendemail();" role="button">
                                                <i class="ni ni-chart-bar-32"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <p class="mt-3 mb-0 text-sm">
                                    <span class="text mr-2"><i class="fab fa-github-alt"></i></span>
                                    <span class="text-nowrap">发送订阅邮件通知</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Page content -->
    <div class="container-fluid mt--6">
        <div class="row">
            <div class="col-xl-8">
                <div class="card">
                    <div class="card-header border-0">
                        <div class="row align-items-center">
                            <div class="col">
                                <h3 class="mb-0">文章列表</h3>
                            </div>
                            <div class="col text-right">
                                <a href="/posts.html" class="btn btn-sm btn-primary">全部</a>
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <!-- Projects table -->
                        <table class="table align-items-center table-flush">
                            <thead class="thead-light">
                            <tr>
                                <th scope="col">文章名</th>
                                <th scope="col">大小</th>
                                <th scope="col">发布状态</th>
                                <th scope="col">编辑</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for post in posts %}
                                <tr>
                                    <th scope="row">
                                        {{ post.name }}
                                    </th>
                                    <td>
                                        {{ post.size | div:1000 }} KB
                                    </td>
                                    <td>
                                        {% if post.status %}
                                            已发布
                                        {% else %}
                                            草稿
                                        {% endif %}
                                    </td>
                                    <td>
                                        <a href="/edit.html?file={{ post.path }}&postname={{ post.name }}"><i
                                                class="fa fa-edit mr-3"></i></a>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-xl-4">
                <div class="card">
                    <div class="card-header border-0">
                        <div class="row align-items-center">
                            <div class="col">
                                <h3 class="mb-0">图片管理</h3>
                            </div>
                            <div class="col text-right">
                                <a href="/images.html" class="btn btn-sm btn-primary">全部</a>
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <!-- Projects table -->
                        <table class="table align-items-center table-flush">
                            <thead class="thead-light">
                            <tr>
                                <th scope="col">图片名</th>
                                <th scope="col">日期</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for image in images %}
                                <tr>
                                    <th scope="row">
                                        {{ image.name }} <a href="{{ image.url }}"
                                                            target="_blank"><i
                                            class="fa fa-external-link-alt"></i></a>
                                    </th>
                                    <td>
                                        {{ image.date }}
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="querySendEmail" tabindex="-1" aria-labelledby="querySendEmailLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="querySendEmailLabel">提示</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        确定要发送订阅邮件吗？这会使用你设置的邮箱账号给所有订阅了的读者发送邮件哦！
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消
                        </button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal"
                                onclick="subscribe()">确定
                        </button>
                    </div>
                </div>
            </div>
        </div>

        {% include "includes/footer.html" %}

    </div>

{% endblock content %}

<!-- Specific JS goes HERE -->
{% block javascripts %}
    <script>
        function subscribe() {
            let loading = new KZ_Loading("正在发送订阅邮件中");
            loading.show();
            $.ajax({
                url: '/api/send_email/',
                method: 'get',
                dataType: 'json',
                timeout: 60000,
                success: function (res) {
                    loading.destroy();
                    if (res.status) {
                        notyf.success(res.msg);
                        setTimeout(location.reload(), 1000);
                    } else {
                        notyf.error(res.msg);
                    }
                },
                error: function (res) {
                    loading.destroy();
                    notyf.error("网络错误！");
                }
            })
        }
        function query_sendemail() {
            $("#querySendEmail").modal("show");
        }
    </script>
{% endblock javascripts %}
